import { Space, Divider, Popconfirm } from "antd";
import { Card as SemiCard, Row, Col, List } from "@douyinfe/semi-ui";
import { useModel } from "umi";

import useAllAdministrators from "../hooks/administrator/useAllAdministrators";
import useUpdateVerifyStatus from "../hooks/administrator/useUpdateVerifyStatus";
import useDeleteAdministrator from "../hooks/administrator/useDeleteAdministrator";

import GatewayCard from "../components/gateway/Card";

const GatewayAdministrators = () => {
    const { windowInnerHeight } = useModel("global");
    const { baseInfo } = useModel("person.info");
    const { loading, administrators, loadAllAdministrators } = useAllAdministrators();
    const { updateVerifyStatus } = useUpdateVerifyStatus();
    const { loading: deleteLoading, deleteAdministrator } = useDeleteAdministrator();

    const passAction = (item) => (
        <a
            key="passed"
            onClick={() =>
                updateVerifyStatus(item.personUuid, (res) => {
                    if (res) {
                        message.success("成功通过");
                        loadAllAdministrators();
                    }
                })
            }
        >
            通过
        </a>
    );

    const deleteAction = (item) => (
        <Popconfirm
            key={3}
            title="确认要删除该管理员吗?"
            placement="topRight"
            okButtonProps={{ loading: deleteLoading }}
            onConfirm={() =>
                deleteAdministrator(item.personUuid, (res) => {
                    if (res) {
                        message.success("成功删除管理员信息");
                        loadAllAdministrators();
                    }
                })
            }
        >
            <a>删除</a>
        </Popconfirm>
    );

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={6}>
                    <GatewayCard cardBodyHeight={cardBodyHeight} />
                </Col>

                <Col span={18}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>管理员信息</span>}
                        headerExtraContent={<Space split={<Divider type="vertical" />} size={4}></Space>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: 20, height: cardBodyHeight - 2, overflow: "auto" }}
                    >
                        <List
                            loading={loading}
                            grid={{ gutter: 16, lg: 5, xl: 4, xxl: 3 }}
                            dataSource={administrators}
                            renderItem={(item) => {
                                let actions = [];
                                if (item.verifyStatus === false) {
                                    if (item.personUuid !== baseInfo.uuid) {
                                        actions.push(passAction(item));
                                        actions.push(deleteAction(item));
                                    } else {
                                        actions.push(
                                            <span key="waiting" style={{ color: "red" }}>
                                                等待核准
                                            </span>
                                        );
                                        actions.push(deleteAction(item));
                                    }
                                } else if (item.personUuid !== baseInfo.uuid) {
                                    actions.push(deleteAction(item));
                                }
                                return (
                                    <List.Item key={item.personUuid} style={{ fontSize: 16, marginBottom: 16 }}>
                                        <Space size={10}>
                                            <span>{item.realName}</span> (
                                            <Space split={<Divider type="vertical" />} size={0}>
                                                {actions}
                                            </Space>
                                            )
                                        </Space>
                                    </List.Item>
                                );
                            }}
                        />
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

export default GatewayAdministrators;
